<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>墨阅小说</title>
	<link th:href="@{/moyue/css/bootstrap.min.css}" rel="stylesheet"/>
	<link th:href="@{/moyue/css/writer.css}"  rel="stylesheet">
	<link th:href="@{/moyue/font-awesome-4.7.0/css/font-awesome.min.css}" rel="stylesheet">
	<link rel="shortcut icon" th:href="@{/moyue/images/favicon.ico}" type="image/x-icon"/>
</head>
	<body style="color: #EFEFEF;">
		<div class="writer-header">
			<div class="header-navss">
				<div class="log-off">
					<a href="/moyue/user/index" th:href="@{/moyue/user/index}">
						<i class="fa fa-power-off" style="font-size: 30px;"> </i> <span>退出登录</span>
					</a>
				</div>
				<div class="header-left">
					<a href="%" style="color: #E0DEDA;">墨阅</a>
					<a href="%" style="color: #2985F6;">作家专区</a>
				</div>
			</div>
		</div>
		<div class="writer-content">
			<div class="writer-sidebar">
				<ul>
					<li>
						<a href="/moyue/user/writerhtml" th:href="@{/moyue/user/writerhtml}">
							<i class="fa fa-home" style="margin-right: 8px;"></i>专区首页
						</a>
					</li>
					<li>
						<a href="/moyue/user/foundhtml" th:href="@{/moyue/user/foundhtml}">
							<span class="iconfont" style="margin-right: 8px;">&#xe609;</span>作品私信
						</a>
					</li>
					<li class="li-act">
						<a href="/moyue/user/workshtml" th:href="@{/moyue/user/workshtml}" style="color:#fff;">
							<span class="iconfont" style="margin-right: 8px;">&#xe620;</span>创建作品
						</a>
					</li>
					<!--<li>-->
						<!--<a href="privately.html">-->
							<!--<span class="iconfont" style="margin-right: 8px;">&#xe646;</span>作者私信-->
						<!--</a>-->
					<!--</li>-->
				</ul>
			</div>
			<div class="writer-center">
				<div class="choice-center">
					<ul>
						<li>
							<i class="iconfont">&#xe627;</i><span>选择类型</span>
						</li>
							<i class="iconfont" style="position: relative; top: -5px;">&#xe649;</i>
						<li>
							<i class="iconfont">&#xe629;</i><span>完善作品信息</span>
						</li>
							<i class="iconfont" style="position: relative; top: -5px;">&#xe649;</i>						
						<li>
							<i class="iconfont">&#xe62b;</i><span>创建成功</span>
						</li>
					</ul>
				</div>
				<div class="ulist-step1">
					<form action="" method="post">
						<p style="text-align: center; margin-bottom: 32px;">目标读者</p>
						<div class="aim">
							<input type="radio" id="male" name="sex" />
    						<label for="male">男</label>
							<p style="text-indent: 2em;">以男性视角或男性受众为主的作品，玄幻/奇幻/历史/都市/灵异/仙侠/游戏/二次元/武侠/军事等所有男生题材</p>
						</div>
						<div class="aim">
							<input type="radio" id="female" name="sex" />
    						<label for="female">女</label>
							<p style="text-indent: 2em;">以女性视角或女性受众为主的作品，古言/现言/玄幻/青春/悬疑/科幻/仙侠/游戏/N次元等所有女生题材</p>
						</div>
						<div class="next-step" id="step1">
							<a class="button">下一步</a>
						</div>
					</form>
				</div>
				<div class="ulist-step2 none">
					<dl>作品名称</dl>
					<dt class="section2">
						<input type="text" name="bookName" id="bookName"  maxlength="15" onkeyup="work_title()"/>
						<div class="flisde" id="warm1">15字内，请勿添加书名号等特殊符号</div>
						<p class="booknamepan"></p>
					</dt>
					<dl>作品类型</dl>
					<dt class="section3">
						<select class="browsers-id">
							<option th:label="请选择"></option>
							<option th:each="ftype : ${typelist}"  th:label="${ftype.typeName}" th:value="${ftype.typeId}" >

							</option>
						</select>
						<select class="browserson-id">
							<option th:label="请选择"></option>
						</select>
					</dt>
					<dl style="height: 50px">作品标签</dl>

					<dt class="section4">
						<input type="text" id="tagg"/>
						<input type="hidden"  id="taggid">
					</dt>
					<div id="back1">
						<div class="tab">
							<img th:src="@{/moyue/img/chahao.jpg}" id="xiaoshi1"/>
							<p>作品标签</p>
							<div class="tabulist">
								<div style="color: #999; font-size: 12px;">请选择最多5个作为您的作品标签，每类中限选一个：</div>
								<div class="tablist">
									<ul>
										<li>
											<span>风格</span>
											<div class="tagfilter">
												<a href="javascript:;" th:each=" labels : ${label}" >
													<input type="hidden" th:value="${labels.typeId}">
													<span th:text="${labels.typeName}"></span>
												</a>
											</div>
										</li>
									</ul>
								</div>
								<div class="next-step" id="sure" onclick="listchoose()">
									<div class="button">确定</div>
								</div>
							</div>
						</div>
					</div>
					<dl style="height: 150px;">作品介绍</dl>
					<dt class="section5">
								<textarea style="margin-top: -88px;" name="bookDescription" id="introduce">

                                </textarea>
						<div class="flisde">200~300字</div>
					</dt>
					<dl>是否签约</dl>
					<dt class="section6">
						<select id="contract" >
							<option selected>请选择</option>
							<option value = "1">是</option>
							<option value = "2">否</option>
						</select>
					</dt>
					<div class="next-step">
						<div class="button" id="step2">下一步</div>
						<div id="step-back">返回上一部</div>
					</div>
					<div id="back">
						<div class="kindly">
							<img th:src="@{/moyue/img/chahao.jpg}" id="xiaoshi"/>
							<p>温馨提示</p>
							<div class="next-step" id="tep1" onclick="workadd()">
								<div class="button">确定</div>
							</div>	
						</div>
					</div>
				</div>
				<div class="ulist-step3 none">
					<div class="found-success"><i class="iconfont">&#xe633;</i>作品创建成功</div>
					<div class="found-center">
						新建作品后，请尽快上传新章节，章节上传满2000字之后将会进入编辑审核后台，编辑将会在2个工作日内进行审核。
					</div>
					<div class="found-bottom">
						请注意：根据国家相关法律法规要求，请勿上传任何色情、低俗、涉政等违法违规内容，我们将会根据法规进行审核处理和上报。
					</div>
					<div class="next-step">
						<a th:href="@{/moyue/user/writerhtml}" class="button">继续上传章节</a>
					</div>
				</div>
			</div>
			<input type="hidden" class="browid">
		</div>

		<script th:src="@{/moyue/js/jquery-3.3.1.min.js}"></script>
		<script th:src="@{/moyue/js/bootstrap.min.js}"></script>
		<script type="text/javascript" th:src="@{/moyue/js/autor.js}"></script>
		<script th:inline="javascript">
            $('.browsers-id').on('change',function (){
                $.ajax({
                    type: "POST",//数据发送的方式（post 或者 get）
                    url: "/moyue/admin/book/getson",//要发送的后台地址
                    data: {
                        typeId:$('.browsers-id').val() ,
                    },//要发送的数据（参数）格式为{'val1':"1","val2":"2"}
                    dataType:"JSON",
                    success: function (data) {//ajax请求成功后触发的方法
                        if(data.code==0){
                            var datas=data.data;
                            $(".browserson-id").empty();

                            for (var aa in datas){
                                var str = "<option value="+datas[aa].typeId +"  "+ "label=" + datas[aa].typeName + " ></option>";
                                $(".browserson-id").append(str);
                            }
                        }else{
                            alert(data.msg);
                        }
                    },
                    error: function (msg) {//ajax请求失败后触发的方法
                        alert("网络故障");//弹出错误信息
                    }
                });
            })


            //在input file内容改变的时候触发事件
            $('#filed').change(function(){
                //获取input file的files文件数组;
                //$('#filed')获取的是jQuery对象，.get(0)转为原生对象;
                //这边默认只能选一个，但是存放形式仍然是数组，所以取第一个元素使用[0];
                var file = $('#filed').get(0).files[0];
                //创建用来读取此文件的对象
                var reader = new FileReader();
                //使用该对象读取file文件
                reader.readAsDataURL(file);
                //读取文件成功后执行的方法函数
                reader.onload=function(e){
                    //读取成功后返回的一个参数e，整个的一个进度事件
                    console.log(e);
                    //选择所要显示图片的img，要赋值给img的src就是e中target下result里面
                    //的base64编码格式的地址
                    $('#imgshow').get(0).src = e.target.result;
                }
            })
		</script>
	</body>
</html>
